<template>
  <view class="container">
    <view class="header">
      <text class="title">公告列表</text>
    </view>
    
    <view class="timeline">
      <view class="timeline-item" v-for="(item, index) in noticeList" :key="item.id">
        <view class="timeline-dot"></view>
        <view class="timeline-line" v-if="index !== noticeList.length - 1"></view>
        <view class="timeline-content">
          <view class="notice-header">
            <text class="notice-title">{{ item.title }}</text>
            <text class="notice-time">{{ formatTime(item.publishTime) }}</text>
          </view>
          <text class="notice-content">{{ item.content }}</text>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore" @click="loadMore">
      <text class="load-more-text">加载更多</text>
    </view>
    <view class="no-more" v-else>
      <text class="no-more-text">没有更多了</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { request } from '@/utiles/request';

interface NoticeItem {
  id: number;
  title: string;
  content: string;
  publishTime: string;
  createTime: string;
  updateTime: string;
}

const noticeList = ref<NoticeItem[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const hasMore = ref(true);

// 获取公告列表
const getNoticeList = (isLoadMore = false) => {
  if (!isLoadMore) {
    currentPage.value = 1;
    noticeList.value = [];
  }

  request({
    url: '/admin/api/notice/list',
    method: 'GET',
    data: {
      page: currentPage.value,
      pageSize: pageSize.value
    }
  }).then(res => {
    if (res.data && res.data.code === 200) {
      const { list, total } = res.data.data;
      if (isLoadMore) {
        noticeList.value = [...noticeList.value, ...list];
      } else {
        noticeList.value = list;
      }
      hasMore.value = noticeList.value.length < total;
    } else {
      uni.showToast({
        title: res.data?.msg || '获取公告失败',
        icon: 'none'
      });
    }
  }).catch(() => {
    uni.showToast({
      title: '网络错误',
      icon: 'none'
    });
  });
};

// 加载更多
const loadMore = () => {
  if (!hasMore.value) return;
  currentPage.value++;
  getNoticeList(true);
};

// 格式化时间
const formatTime = (time: string) => {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}`;
};

onMounted(() => {
  getNoticeList();
});
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 20rpx;
}

.header {
  padding: 30rpx 0;
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.timeline {
  position: relative;
  padding: 20rpx 0;
}

.timeline-item {
  position: relative;
  padding-left: 40rpx;
  margin-bottom: 40rpx;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 20rpx;
  width: 20rpx;
  height: 20rpx;
  background-color: #1976D2;
  border-radius: 50%;
  z-index: 1;
}

.timeline-line {
  position: absolute;
  left: 9rpx;
  top: 40rpx;
  width: 2rpx;
  height: calc(100% + 20rpx);
  background-color: #E0E0E0;
}

.timeline-content {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.notice-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.notice-time {
  font-size: 24rpx;
  color: #999999;
}

.notice-content {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
  white-space: pre-wrap;
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
}

.load-more-text {
  font-size: 28rpx;
  color: #1976D2;
}

.no-more {
  text-align: center;
  padding: 30rpx 0;
}

.no-more-text {
  font-size: 28rpx;
  color: #999999;
}
</style>